<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽进度条</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            margin: 50px auto;
            max-width: 750px;
            height: 100px;
            position: relative;
        }

        .box .line {
            width: 100%;
            height: 10px;
            background-color: black;
            position: absolute;
            left: 0;
            top: 30px;
        }
        .box .active_line{
            width: 0;
            height: 10px;
            background-color: #E9E9E9;
            position: absolute;
            left: 0;
            top: 30px;
            z-index: 1;
        }

        .box .circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #eb2914;
            position: absolute;
            left: 0;
            top: 17px;
            cursor: pointer;
            z-index: 3;
        }

        .transparent_line{
            width: 100%;
            height: 10px;
            background-color: transparent;
            position: absolute;
            left: 0;
            top: 30px;
            z-index: 2;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="line"></div>
    <div class="active_line"></div>
    <div class="transparent_line"></div>
    <div class="circle"></div>
</div>
<script>
    let box = document.querySelector('.box');
    let line = document.querySelector('.line');
    let active_line = document.querySelector('.active_line');
    let transparentLine = document.querySelector('.transparent_line');
    let circle = document.querySelector('.circle');
    let boxWidth = box.offsetWidth;
    let boxLeft = box.offsetLeft

    function mouseupFn(e) {
        document.removeEventListener('mousemove', mousemoveFn);
        document.removeEventListener('mouseup', mouseupFn);
    }

    function mousemoveFn(e) {
        let deltaX = e.clientX - boxLeft //鼠标相对网页的X值
        console.log(deltaX);
        console.log(boxWidth);
        if (deltaX > 0 && deltaX < boxWidth) {
            circle.style.left = deltaX + 'px';
            active_line.style.width = deltaX + circle.offsetWidth / 2 + 'px';
        }
    }
    transparentLine.addEventListener('mouseup', function (e) {
        let lineX = e.clientX - box.offsetLeft;
        if (e.button === 0) {
            circle.style.left = lineX - circle.offsetWidth / 2 + 'px';
            active_line.style.width = lineX + circle.offsetWidth / 2 + 'px';
        }
    })
    circle.addEventListener('mousedown', function (e) {
        let originX = e.target.offsetLeft
        document.addEventListener('mousemove', mousemoveFn, false)
        document.addEventListener('mouseup', mouseupFn, false)
    }, false)
</script>
</body>
</html>
